﻿
@{
    ViewData["Title"] = "GetOrder";
}

<link href="~/js/Content/bootstrap.css" rel="stylesheet" />
<div>
    <div style="float:left;margin-left:20px;margin-top:-30px">
        <input type="text" style="width:230px" class="form-control" v-model="user" />
    </div>
    <div style="float:left;margin-left:10px;margin-top:-30px">
        <select v-model="Select">
            <option v-for="item in RoomType" v-bind:value="item.gId">{{}}</option>
        </select>
        <input type="button" value="查询" class="btn btn-info" v-on:click="GetOrderByUser" />
    </div>
</div>

<div style="padding:20px;margin-top:30px" id="app">
    <router-view v-if="isRouterAlive"></router-view>
    <div class="panel panel-primary">
        <div class="panel-heading">客房订单管理</div>
        <table class="table table-bordered table-striped text-center">
            <thead>
                <tr>
                    <td>订单编号</td>
                    <td>下单时间</td>
                    <td>下单用户</td>
                    <td>客房类型</td>
                    <td>入住天数</td>
                    <td>入住时间</td>
                    <td>订单总价</td>
                    <td>客房尺寸</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-for="(item,index) in Relut">
                <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
                    <td>{{index}}</td>
                    <td>{{item.aBgTime}}</td>
                    <td>{{item.aUserName}}</td>
                    <td>{{item.guestroomtype.gname}}</td>
                    <td>{{item.aDay}}</td>
                    <td>{{item.aRuzhu}}</td>
                    <td>{{item.aMoney}}</td>
                    <td>{{item.guestroomtype.gsize}}</td>
                    <td><input type="button" class="btn btn-sm btn-info" value="详情" /><input type="button" class="btn btn-sm btn-danger" v-on:click="DeleteFunction(item.aId)" value="删除" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="app">
    <nav style="float:right;">
        <ul class="pagination pagination-lg">
            <template v-for="page in Math.ceil(Relut.length/pagesize)">
                <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
                <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(Relut.length/pagesize)"><a href="#">下一页</a></li>
            </template>
        </ul>
    </nav>
</div>

<script>
    export default {
        name: 'App',
        provide() {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
            return {
                reload: this.reload
            }
        },
        data() {
            return {
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload() {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                })
            }
        }
    }
</script>
<script type="text/javascript">


    // 实例化vue对象（MVVM中的View Model）
    new Vue({
        // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
        el: '#ViewContent',
        inject: ['reload'],  
        data() {
            return {
                Relut: [],
                oid: 0,
                user: "",
                pages: 10,
                pagesize: 6,
                curpage: 1,
                RoomType:[]
            }
        },
        mounted: function () {
                //设置请求路径
                var url = "/Guestroomorder/GetRoomOrder";
                // 并且响应成功以后会执行then方法中的回调函数
                axios.get(url).then(res => (this.Relut = res.data)).catch(function (Erro) {
                    console.log(Erro);
                });
        },
        methods: {
            GetRoomtype: function () {
                //获取客房类型
                var urlType = "/Guestroomorder/GetOrderoomType";
                // 并且响应成功以后会执行then方法中的回调函数
                axios.get(urlType).then(res => (this.RoomType = res.data)).catch(function (Erro) {
                    console.log(Erro);
                });

            },
            DeleteFunction: function (aid) {
                this.oid = aid;

                //设置请求路径
                var url = "/Guestroomorder/DeleteOrder";

                axios.get(url, {
                    params: {
                        oid: this.oid
                    }
                }).then(function (i) {
                    if (i.data > 0) {
                        alert("删除成功!");
                        location.href = '/Guestroomorder/GetOrder'
                    }
                    else {
                        alert("失败了!");
                    }
                })
            },
            OrderSingle: function () {
                //设置跳转路径
                location.href = '/Guestroomorder/UpdateOrder';
            },
            GetOrderByUser: function () {
                //设置请求路径
                var url = "/Guestroomorder/GetRoomOrder";
                // 发送请求:将数据返回到一个回到函数中
                // 并且响应成功以后会执行then方法中的回调函数
                axios.get(url, {
                    params: {
                        user: this.user
                    }
                }).then(res => (this.Relut = res.data)).catch(function (Erro) {
                    console.log(Erro);
                });
            },
            //上一页方法
            PrePage: function (event) {
                $(".pagination .active").prev().trigger("click");
            },
            //下一页方法
            NextPage: function (event) {
                $(".pagination .active").next().trigger("click");
            },
            //点击页码的方法
            NumPage: function (num, event) {
                if (this.curpage == num) {
                    return;
                } 
                this.curpage = num;
                $(".pagination li").removeClass("active");
                if (event.target.tagName.toUpperCase() == "LI") {
                    $(event.target).addClass("active");
                }
                else {
                    $(event.target).parent().addClass("active");
                }
                if (this.curpage == 1) {
                    $("#prepage").addClass("disabled");
                }
                else {
                    $("#prepage").removeClass("disabled");
                }
                if (this.curpage == Math.ceil(this.Relut.length / this.pagesize)) {
                    $("#nextpage").addClass("disabled");
                }
                else {
                    $("#nextpage").removeClass("disabled");
                }
            }
        }
    })

</script>
